<template>
  <el-dialog title="设备详情" :visible="isShowDialog" @close="btnDelete">
    <el-row class="header">
      <el-col :span="6">销售量：{{ totalsale }}个</el-col>
      <el-col :span="6">销售额：{{ innerCodeList }}元</el-col>
      <el-col :span="6">补货次数：{{ supplyCount }}次</el-col>
      <el-col :span="6">维修次数：{{ repairCount }}次</el-col>
    </el-row>
    <div style="font-size: 18px; margin-bottom: 15px">商品销量(月)</div>
    <el-row type="flex" class="elrow">
      <el-col
        v-for="item in vmskuCollectList"
        :key="item.key"
        :span="6"
        class="total"
      >
        <div class="span-text">
          <span>{{ item.skuName }}</span>
        </div>
        <div style="float: left ;margin:0 10px 0 10px"><span>:</span></div>
        <div style="float: left">
          <span>{{ item.count }}</span>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// import { getSkuCollect } from '@/api/vm'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    vmskuCollectList: {
      type: Array,
      required: true
    },
    totalsale: {
      type: Number,
      required: true
    },
    repairCount: {
      type: Number,
      required: true
    },
    supplyCount: {
      type: Number,
      required: true
    },
    innerCodeList: {
      type: String,
      required: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    btnDelete() {
      this.$parent.isShowDialog = false
    }
  }
}
</script>

<style scoped>
.header {
  height: 60px;
  margin-bottom: 50px;
  color: #666;
  font-size: 18px;
  line-height: 50px;
  padding-left: 20px;
  background: rgba(227, 233, 245, 0.39);
}
.total {
  /* width:150px ; */
  height: 40px;
  border: 1px solid gray;
  line-height: 40px;
  padding-left: 20px;
  float: left;
}
.elcol {
  margin: 10px;
}
.elrow {
  display: flex;
  flex-wrap: wrap;
}
/* .span-text{
  width: 100%;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
} */
.span-text {
  max-width: 6em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
</style>

